<template>
    <div class="div">
        <header>商品分类</header>
        <van-sidebar v-model="activeKey" @change="onChange">
            <van-sidebar-item :title="v.name" v-for="v in classifyInfo">
            </van-sidebar-item>
        </van-sidebar>
        <div class="right">
            <div v-for="v in rightInfo" class="item-title">
                <p class="">{{v.name}}</p>
                <ul class="item-container">
                    <li v-for="a in v.children" class="thumb-box">
                        <p class="u-image__image"><img :src="a.image" alt=""></p>
                        <p class="item-menu-name">{{a.name}}</p>
                    </li>
                </ul>
            </div>
        </div>
        <!--底部导航-->
        <van-tabbar v-model="active" active-color="#ee0a24">
            <van-tabbar-item icon="wap-home-o" @click="goHome">首页</van-tabbar-item>
            <van-tabbar-item icon="apps-o">分类</van-tabbar-item>
            <van-tabbar-item icon="cart-o" @click="goCart">购物车</van-tabbar-item>
            <van-tabbar-item icon="user-o" @click="goMine">我的</van-tabbar-item>
        </van-tabbar>
    </div>
</template>

<script>
    import jsp from '../../../Api/Api'

    export default {
        name: "Classify",
        data() {
            return {
                //分类的总数据
                classifyInfo: [],
                //分类右边的数据
                rightInfo: [],
                //分类左边的数据
                leftInfo: [],
                //插件需要的数据
                activeKey: 0,
                //下标
                index: 0,
                active: 1,
            }
        },
        methods: {
            onChange(index) {
                this.index = index
                this.rightInfo = this.classifyInfo[this.index].children
                console.log(this.rightInfo)
            },
            goHome() {
                this.$router.push('/home')
            },
            goMine() {
                this.$router.push('/mine')
            },
            goCart(){
                this.$router.push('/cart')
            }
        },

        created() {
            jsp.getToptype().then(data => {
                this.classifyInfo = data.data
                this.rightInfo = data.data[0].children
                console.log(this.rightInfo)
            }).catch(err => {
            })
        }
    }
</script>

<style scoped>
    .div {
        overflow: hidden;
    }

    header {
        background: url("../../../assets/bg2.png") 0% 0% / cover;
        width: 100%;
        height: 2rem;
        text-align: center;
        line-height: 2rem;
        color: white;
        font-size: 0.7rem;
        position: fixed;
        top: 0;
        left: 0;
    }

    .van-sidebar {
        width: 25%;
        position: fixed;
        left: 0;
        top: 2rem;
    }

    .right {
        float: right;
        width: 75%;
        padding: .3rem;
        margin-top: 2rem;
        box-sizing: border-box;
    }

    .item-title {
        color: #303133;
        font-weight: 700;
        padding: .4rem;
        border-radius: 0.3rem;
        margin-bottom: 0.6rem;
        box-sizing: border-box;
        background-color: white;
    }

    .item-title:last-child {
        margin-bottom: 2.5rem;
    }

    .item-title > p {
        font-size: 0.6rem;
    }

    .item-container {
        display: flex;
        flex-wrap: wrap;
        /*padding: .1rem;*/
        margin-top: 0.3rem;
        box-sizing: border-box;
    }

    .thumb-box {
        width: 33%;
        display: -webkit-box;
        display: -webkit-flex;
        display: flex;
        margin-top: 0.3rem;
        -webkit-box-align: center;
        -webkit-align-items: center;
        align-items: center;
        -webkit-box-pack: center;
        -webkit-justify-content: center;
        justify-content: center;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -webkit-flex-direction: column;
        flex-direction: column;
    }

    .item-menu-name {
        font-weight: 400;
        font-size: 0.6rem;
        color: #303133;
        overflow: hidden;
        width: 5rem;
        height: 1rem;
        text-align: center;
    }

    .u-image__image {
        width: 100%;
        height: 100%;
        text-align: center;
    }

    .u-image__image > img {
        width: 53%;
    }

</style>